<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<router-link to="/invoice">
				<b class="colors">/<img style="top: 1px" src="../assets/img/sidebar8.png" />发票信息</b>
            </router-link>
			<b>/<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-order"></i>发票信息详情</b>
			<!-- <el-input placeholder="请输入灵活用工平台名称进行搜索" suffix-icon="el-icon-search" v-model="search">
			</el-input> -->
			<em style="margin-left: -5px;">发票详情信息</em>
		</div>
		<el-row :gutter="24" style="margin-bottom: 20px">
			<el-col :span="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="information">
						<div class="infoTit" style="margin-left: 30px;">
							<b style="font-weight: bold">结算明细</b>
						</div>
					</div>
					<div class="infoCon">
						<span>
							<strong>增值税专用发票</strong>
							<div class="image-box">
								<el-image class="fap-img" :preview-src-list="[$route.query.billUrl]" :src="$route.query.billUrl"></el-image>
							</div>
						</span>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">关联业务
					</div>
					<el-table :data="tableData" stripe style="width: 100%" @sort-change="sortChange">
						<el-table-column width="30">
						</el-table-column>
						<el-table-column prop="taskName" sortable="custom" label="任务名称">
						</el-table-column>
						<el-table-column prop="taskAmount" id="taskPayment" sortable="custom" label="订单金额（元）">
						</el-table-column>
						<el-table-column prop="finishTime" id="endDate" sortable="custom" label="交易完成时间">
							<template #default="item">
								{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.finishTime)) }}
							</template>
						</el-table-column>
						<el-table-column prop="payeeName" id="businessName" sortable="custom" label="收款方">
						</el-table-column>
						<el-table-column prop="payerName" id="platformName" sortable="custom" label="付款方">
						</el-table-column>
						<el-table-column prop="caozuo" label="操作" width="70" class-name="editor">
							<template #default="item">
								<el-button type="text" @click="open1(item.row.receiptBillUrl)">详情</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="arrPage" :page-size="selectPage"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	export default {
		name: "dashboard",
		data() {
			return {
				orderByZH: false,
				orderByAsc: false,
				orderByColume: 'createTime',
				tableData: [],
				search: '',
				currentPage: 1,
				total: 0, // 总条数
				arrPage: [10, 20], // 每页条数
				selectPage: 10 // 每页选中条数
			};
		},
		components: {},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},
		created() {
			this.getTableData()
		},
		methods: {
			getTableData() {
				// 获取关联业务列表
				this.$http({
					url: '/api/invoice/selectInvoiceTaskList',
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					},
					data: {
						"billType": this.$route.query.billType, // 发票类型
						"invoiceId": this.$route.query.id, // 发票id
						"platformId": this.$route.query.businessId, // 灵活用工平台
						"mixedStr": this.search,
						"pageNum": this.currentPage,
						"pageSize": this.selectPage,
						orderByAsc: this.orderByAsc, // 是否正序
						orderByColume: this.orderByColume, // 排序字段
						orderByZH: this.orderByZH, // 是否汉字
					}
				}).then(data => {
					if (data.code === 0) {
						this.tableData = data.result.list
						this.total = data.result.total
					}
				})
			},
			sortChange(d) {
				// 监听排序
				if(d.prop == null) {
					// 默认排序方式
					this.orderByZH = false
					this.orderByAsc = false
					this.orderByColume = 'createTime'
				}else {
					let orderByZH = false
					if(d.id == "businessName"|| d.id == "platformName"|| d.prop == "taskName") {
						orderByZH = true
					}
					this.currentPage = 1
					this.selectPage = 10
					let orderByAsc = d.order == "descending" ? false : true
					this.orderByZH = orderByZH
					this.orderByAsc = orderByAsc
					this.orderByColume = d.id
				}
				this.getTableData();
			},
			handleSizeChange(val) {
				// 切换每页条数调用
				this.selectPage = val
				this.getTableData()
			},
			handleCurrentChange(val) {
				// 切换当前页数调用
				this.currentPage = val
				this.getTableData()
			},
			open() {
				this.$alert('<img src="http://111.jingdong.applinzi.com/zh/images/fp.png" />', {
					dangerouslyUseHTMLString: true
				});
			},
			open1(src) {
				this.$alert('<img style="max-width:80%" src="'+ src +'" />', {
					dangerouslyUseHTMLString: true
				});
			},
		}
	};
</script>
<style scoped>
	.fap-img {
		display: block;
		width: 600px;
		margin: 15px auto;
		border: 1px solid #E0EAF6;
		padding: 10px;
	}
	.fap-img :deep(img) {
		display: inline-block;
		width: auto;
		height: auto;
		border: 0;
		max-width: 100%;
		padding: 0;
	}
</style>